<!DOCTYPE html>
<html>
<head>
    <title>添加配置</title>
    <include file='public/head'>
	<style>
		.layui-legend-size{font-size:14px !important;}
		.layui-nopadding{padding:0 !important;}
		.layui-overflow{overflow:auto;}
		.layui-nomargin{margin: 0 !important;}
		.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
		.layui-input{height:30px !important; }
		.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
		.layui-form-search-item label{margin-left: 15px;}
		.layui-table-page {padding: 7px 0px 0px;}
		.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
		.new-ctrl{ width:100%; height:25px; border-radius:5px; };
	</style>
</head>
<body>
	<!-- layui-tab开始 -->
	<div class="layui-tab " lay-filter="demo-tab" >

	
		<!-- 内容开始 -->
		<div class="layui-card">
			<!-- 表头按钮开始 -->
			<div class="layui-card-header layui-bg-gray layui-bottom">
				<a href="javascript:;" class="layui-btn layui-btn-xs add-row-btn" ><i class="layui-icon">&#xe654;</i>添加一行</a>
				<a href="javascript:;" class="layui-btn layui-btn-xs add-mb-btn" ><i class="layui-icon">&#xe654;</i>添加模板数据</a>
			</div>
			<!-- 表头按钮结束 -->
			
			<!-- layui-card-body开始 -->
			<div class="layui-card-body layui-nopadding">
				<form class="layui-overflow" id="da"><!-- 数据表溢出滑动 -->
					<table  class="layui-table layui-nomargin">
						<thead>	
							<tr>
								<th style="width:40px;">关联id</th>
								<th>标题</th>
								<th>介绍</th>
								<th>图片</th>
								<th style="width:90px;">超链接|路由地址</th>
								<th>地址</th>
								<th style="width:60px;">显示</th>
								<th>时间(s)</th>
								<th style="width:40px;">操作</th>
							</tr>
						</thead>
						<tbody class="list-tbd">
						</tbody>
					</table>
				</form>

			</div>
			<!-- layui-card-body结束 -->
		</div>
		<!-- 内容结束 -->
	</div>
	<!-- layui-tab结束-->
	<include file='public/scripts'>

	<script >
	;!function(){
	}();
	var form = layui.form
		,layer = layui.layer    //弹出层必需
		,layedit = layui.layedit  //富文本必需
		,laydate = layui.laydate  //日期选择必需
		,table = layui.table  //表格必需
		,element = layui.element;  //选项卡	


    
 	//全选/取消
	$('#check-box-all').on('click',function(){	
	    
		$('.check-box').prop('checked',$('#check-box-all').prop('checked'));
	}); 
  
	//日期选择器	   
	laydate = layui.laydate;
	laydate.render({
		elem: '#test1' //指定元素
	});
	laydate.render({
		elem: '#test2' //指定元素
	});


	//添加一行
	$('.add-row-btn').on('click',function(){
	    var obj = {
	        relevance_id:'',
	        title:"",
	        img:"",
	        introductory:'',
	        addr:'',
	        addr_type:'',
	        delay:0,
	        status:1
	        
	    };
	    addRow( obj );
	});
	
	let zydomain = '{:zy_domain()}';

	var addRow = function( obj ){
	    var tr = '<tr>';
	       tr += '<td><input class="new-ctrl"  name="relevance_id" value="'+obj.relevance_id+'" autocomplete="off"  /></td>';
	       tr += '<td><input class="new-ctrl"  name="title" value="'+obj.title+'" autocomplete="off" /></td>';
	       tr += '<td><input class="new-ctrl"  name="introductory" value="'+obj.introductory+'"  autocomplete="off" /></td>';
	       var img = ( obj.img !='' ) ? zydomain+obj.img : '';
	       tr += '<td><img src="'+img+'" style="width:24px;height:24px;"/><input type="hidden" class="new-ctrl" name="image" value="'+obj.img+'"></td>';
	       tr += '<td><select class="new-ctrl"  name="addr_type" ><option value="0" '+(obj.addr_type==0?" selected ":"")+' >超链接</option><option value="1" '+(obj.addr_type==1?" selected ":"")+' >路由地址</option></select></td>';
	       tr += '<td><input class="new-ctrl"  name="addr" value="'+obj.addr+'" autocomplete="off"  /></td>';

	       tr += '<td><select class="new-ctrl"  name="status" ><option value="1" '+(obj.status==1?" selected ":"")+' >显示</option><option value="0" '+(obj.status==0?" selected ":"")+' >隐藏</option></select></td>';
	       
	       tr += '<td><input class="new-ctrl"  name="delay" value="'+obj.delay+'" autocomplete="off"  /></td>';
	       
	       tr += '<td><button type="button" class="layui-btn layui-btn-xs layui-btn-primary remove-row-btn" style="font-weight:800 ;" title="移除行"><i class="layui-icon">&#xe640;</i></button></td>';
	       tr += '</tr>';
	   $('.list-tbd').append( tr );
	   table.render();
	   form.render();
	}
	
	$(document).on('click','.remove-row-btn',function(){
	    $(this).parents( 'tr' ).remove();
	    layer.msg( '移除一行' );
	});



    
	//修改
	var selected = [];
	$('.add-mb-btn').on('click', function(){
		let id = $(this).data('id');
		let url = "{:cmf_plugin_url('SiteConfig://home_page_config/mbConfigAdd')}?type={$type}";
		layer.open({
    		type: 2
    		,title: '添加模板数据'
    		,shadeClose: false
    		,shade: 0.8
    		,area: ['95%', '95%']
    		,btn:['确定','关闭']//操作按钮
    		,fixed:false
    		,content: url //iframe的url
    		,yes:function(index, layero){
    			//调用子页面方法
    			var res = window["layui-layer-iframe" + index].callbackdata();
    			if( res==false ){
    			    layer.msg( '未选择任何数据,无法添加' , function(){} );
    			    return false;
    			}

    			$.each( res , function( index,value ){
                    addRow( value );
    			    /*if( -1 == $.inArray( value.relevance_id , selected ) ){
    			        selected.push( value.relevance_id );
    			        
    			    }*/
    			    
    			});
    			
    			layer.close( index );
    
    		},
    		btn2:function(index, layero){
    		}
		});
	});


	//批量删除 
	$('.batch-delete').on('click',function(){
	    $(document).find('.list-tbd tr').each(function(){
	        
	        $(this).find( '.remove-row-btn' ).parents('tr').remove();
	    });
	});
	
	
	var callbackdata = function( index ){
	    var obj = [];
	    var isok= true;
	    $( document ).find('.list-tbd tr').each( function(){
	        var tmp = {};
	        $( this ).find( '.new-ctrl' ).each( function(){
	            let name = $(this).attr( 'name' );
	            let val = $(this).val();
	            if( -1 != $.inArray( name , [ "title" , 'introductory' , 'addr'  ]  ) && val == '' ){
	                
	                layer.tips(  "不能为空" , $( this ) ,{  tips: 1 } );
	                isok = false;
	                return false;
	            }
	            tmp [ name ] = val;
	        });
	        if( !isok){
	            return false;
	        }
	        tmp ['type'] = '{$type|default="0"}' ;
	        obj.push(tmp);
	    } );
	    if( !isok ){
	        layer.msg( '请将信息填写完整在提交' , function(){} );
	        return false;
	    }
	    if( obj.length == 0 ){
	        layer.msg( "未添加任何数据,不能提交" , function(){} );
	        return false;
	    }
	    
	    $.post( "{:cmf_plugin_url('SiteConfig://home_page_config/postConfig')}" , { data: obj } , function( res ){
	        layer.msg( res.message , { icon: res.code==200 ? 1: 5 , time:800 } , function(){
	            if( res.code == 200 )
	            parent.location.reload();
	        } );
	    } );
	}
	
	
	

	</script>


</body>
</html>